<template>
  <!--模板-->
  <h1> ref （数组） 失去响应性的各种情况 </h1>
  arr：{{ arr }}<br>
  <el-button type="" @click="change1">直接赋值 ref.value</el-button><br>
  <el-button type="" @click="change2">ref.value[0]</el-button><br>

  <hr>
  <!---->
  <son :listRef="arr"></son>
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, ref, watch } from 'vue'
  import son from './son1.vue'

  const arr = ref([{
    name: 'jyk'
  }])
  let index = 0
  // A 只监听筐的变化，不管小米如何变
  watch(arr, () => {
    console.log('watch arr------：', arr)
  })

  // B 手动深层监听，可以监听筐和小米
  watch(arr, (v1, v2) => {
    console.log('手动深层 watch arr：', v1 === v2, arr)
  },{deep:true})

  // C 只监听 ref 自己，和筐、小米都无关
  watch(() => arr, () => {
   // console.log('父组件： watch () => arr：', arr)
  })
  
  // D 一开始能监听苹果，ref.value = [] 后，就不能监听苹果了。
  watch(arr.value, () => {
    //console.log('watch arr.value：', arr)
  })

  // E 手动监听筐，不是深层，相当于 A
  watch(() => arr.value, () => {
    //console.log('watch () => arr.value：', arr)
  })
  // F 深层的监听，都有。相当于 B
  watch(() => arr.value, () => {
   // console.log('手动深层 watch () => arr.value：', arr)
  },{deep:true})


  const change1 = () => {
    arr.value = [{name: 'jyk9999' + index++}]
  }

  const change2 = () => {
    arr.value[0] = {name: 'jyk3333' + index++}

  }

</script>